<template>
	<view>
		<view class="content">
			<view class="avatar">
				<mu-row justify-content="center">
					<mu-avatar :size="size" class="avatar_item">
						<img src="https://iconfont.alicdn.com/t/b90f5060-02cd-4087-b724-944995370661.png">
					</mu-avatar>
				</mu-row>
			</view>
			<view class="name">
				<mu-row justify-content="center">
					<text v-if="userInfo!=''">{{userInfo.id}} | {{userInfo.username}}</text>
					<text v-else>
						<mu-text-field v-model="fromInfo.username" label="账号"></mu-text-field><br />
						<mu-text-field v-model="fromInfo.password" label="密码"	
							:type="visibility ? 'text' : 'password'">
						</mu-text-field><br />
						<view class="loginBtn" style="display: flex; justify-content: flex-end;">
							<mu-button color="info" @click="login">登录</mu-button>
						</view>
					</text>
				</mu-row>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fromInfo:{
					username:'',
					password:''
				},
				size: '120rpx',
				userInfo: '',
				isLogin: false,
				visibility: false
			};
		},
		onLoad() {
			const userInfo =uni.getStorageSync('userInfo');
			if (userInfo != '') {
				this.userInfo = userInfo;
				console.log(this.userInfo);
			}
			return;
		},
		onShow() {

		},
		methods: {
			async login() {
				let opts = {
					url: '/login',
					method: 'POST'
				};
				const fromInfo=this.fromInfo;
				 await this.$api(opts,fromInfo).then(res=>{
					console.log(res.data.data);
					this.userInfo=res.data.data;
					uni.setStorageSync('userInfo',res.data.data);
					console.log(uni.getStorageSync('userInfo'));
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		background-color: rgb(243, 246, 250);
	}

	.content {
		margin-top:100rpx;

		.avatar {
			.avatar_item {
				border: 10rpx solid #eee;
			}
		}

		.name {
			margin-top: 50rpx;
			font-size: 28rpx;
			font-weight: 500;

		}
	}
</style>
